<!DOCTYPE html>
<html>
<head>
    <title>Film Reel</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="filmReelCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('filmReelCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const cx = canvas.width / 2;
        const cy = 240; // Adjust center y for text below
        const scale = 0.95;
        const D = 360;
        const d = 120;
        const R_px = (D / 2) * scale; // Outer radius in pixels
        const r_px = (d / 2) * scale; // Inner radius in pixels

        // Colors
        const filmColor = '#404040';
        const reelColor = '#D0D0D0';
        const textColor = '#000000';

        // 1. Draw the film area (dark gray annulus)
        // We draw this first as the background for the spokes.
        ctx.beginPath();
        ctx.fillStyle = filmColor;
        ctx.arc(cx, cy, R_px, 0, 2 * Math.PI, false); // Outer circle
        ctx.arc(cx, cy, r_px, 0, 2 * Math.PI, true);  // Inner circle (clockwise=false, counter-clockwise=true for cutout)
        ctx.fill();

        // 2. Draw the spokes
        ctx.fillStyle = reelColor;
        // The reel has 4 V-shaped structures. Each V consists of 2 trapezoidal spokes.
        const vSpread = 22 * Math.PI / 180;      // Angle of each arm from the main axis
        const spokeWidthAtHub = 12 * Math.PI / 180; // Angular width of spoke at the hub
        const spokeWidthAtRim = 12 * Math.PI / 180; // Angular width of spoke at the rim

        for (let i = 0; i < 4; i++) {
            const baseAngle = i * Math.PI / 2; // Main axes at 0, 90, 180, 270 degrees

            // First arm of the V
            let center1 = baseAngle - vSpread;
            ctx.beginPath();
            ctx.moveTo(cx + r_px * Math.cos(center1 - spokeWidthAtHub / 2), cy + r_px * Math.sin(center1 - spokeWidthAtHub / 2));
            ctx.lineTo(cx + R_px * Math.cos(center1 - spokeWidthAtRim / 2), cy + R_px * Math.sin(center1 - spokeWidthAtRim / 2));
            ctx.lineTo(cx + R_px * Math.cos(center1 + spokeWidthAtRim / 2), cy + R_px * Math.sin(center1 + spokeWidthAtRim / 2));
            ctx.lineTo(cx + r_px * Math.cos(center1 + spokeWidthAtHub / 2), cy + r_px * Math.sin(center1 + spokeWidthAtHub / 2));
            ctx.closePath();
            ctx.fill();

            // Second arm of the V
            let center2 = baseAngle + vSpread;
            ctx.beginPath();
            ctx.moveTo(cx + r_px * Math.cos(center2 - spokeWidthAtHub / 2), cy + r_px * Math.sin(center2 - spokeWidthAtHub / 2));
            ctx.lineTo(cx + R_px * Math.cos(center2 - spokeWidthAtRim / 2), cy + R_px * Math.sin(center2 - spokeWidthAtRim / 2));
            ctx.lineTo(cx + R_px * Math.cos(center2 + spokeWidthAtRim / 2), cy + R_px * Math.sin(center2 + spokeWidthAtRim / 2));
            ctx.lineTo(cx + r_px * Math.cos(center2 + spokeWidthAtHub / 2), cy + r_px * Math.sin(center2 + spokeWidthAtHub / 2));
            ctx.closePath();
            ctx.fill();
        }

        // 3. Draw the central hub
        ctx.beginPath();
        ctx.fillStyle = reelColor;
        ctx.arc(cx, cy, r_px, 0, 2 * Math.PI);
        ctx.fill();

        // 4. Draw the four central holes
        ctx.fillStyle = 'white';
        const holeRadius = r_px * 0.25;
        const holeDist = r_px * 0.5;
        for (let i = 0; i < 4; i++) {
            const angle = Math.PI / 4 + i * Math.PI / 2;
            const hx = cx + holeDist * Math.cos(angle);
            const hy = cy + holeDist * Math.sin(angle);
            ctx.beginPath();
            ctx.arc(hx, hy, holeRadius, 0, 2 * Math.PI);
            ctx.fill();
        }

        // 5. Draw Annotations (Dimension lines and text)
        ctx.strokeStyle = textColor;
        ctx.fillStyle = textColor;
        ctx.lineWidth = 2;

        // Dimension D = 360mm
        const y_D_line = cy + R_px + 30;
        const x1_D = cx - R_px;
        const x2_D = cx + R_px;
        // Vertical ticks
        ctx.beginPath();
        ctx.moveTo(x1_D, cy + R_px);
        ctx.lineTo(x1_D, y_D_line);
        ctx.moveTo(x2_D, cy + R_px);
        ctx.lineTo(x2_D, y_D_line);
        ctx.stroke();
        // Horizontal line with arrows
        ctx.beginPath();
        ctx.moveTo(x1_D, y_D_line);
        ctx.lineTo(x2_D, y_D_line);
        ctx.moveTo(x1_D + 10, y_D_line - 5); ctx.lineTo(x1_D, y_D_line); ctx.lineTo(x1_D + 10, y_D_line + 5);
        ctx.moveTo(x2_D - 10, y_D_line - 5); ctx.lineTo(x2_D, y_D_line); ctx.lineTo(x2_D - 10, y_D_line + 5);
        ctx.stroke();
        // Text
        ctx.font = 'bold 24px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('D=360mm', cx, y_D_line + 8);

        // Dimension d = 120mm
        const y_d_line = cy - R_px - 30;
        const x1_d = cx - r_px;
        const x2_d = cx + r_px;
        // Vertical ticks
        ctx.beginPath();
        ctx.moveTo(x1_d, cy - r_px);
        ctx.lineTo(x1_d, y_d_line);
        ctx.moveTo(x2_d, cy - r_px);
        ctx.lineTo(x2_d, y_d_line);
        ctx.stroke();
        // Horizontal line with arrows
        ctx.beginPath();
        ctx.moveTo(x1_d, y_d_line);
        ctx.lineTo(x2_d, y_d_line);
        ctx.moveTo(x1_d + 10, y_d_line - 5); ctx.lineTo(x1_d, y_d_line); ctx.lineTo(x1_d + 10, y_d_line + 5);
        ctx.moveTo(x2_d - 10, y_d_line - 5); ctx.lineTo(x2_d, y_d_line); ctx.lineTo(x2_d - 10, y_d_line + 5);
        ctx.stroke();
        // Text
        ctx.font = 'italic bold 24px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('d=120mm', cx, y_d_line - 8);

        // 6. Draw Chinese text label
        ctx.font = 'bold 32px SimHei'; // Using a common Chinese font
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('电影胶片夹', cx, y_D_line + 45);

    </script>
</body>
</html>